<template>
  <div class="detbox">
    <header>
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <div>课程详情</div>
      <i class="el-icon-share"></i>
    </header>
    <div class="main">
      <div class="img">
        <img :src="commodity.img" alt="" />
      </div>
      <div class="title">
        <h6>{{ commodity.title }}</h6>
        <p class="shoucang">收藏数:{{ commodity.views }}</p>
        <p class="price">￥{{ commodity.prices }}</p>
      </div>
      <div class="info">
        <h3>课程简介</h3>
        <p>{{ commodity.desc }}</p>
      </div>
    </div>
    <footer>
      <div class="btn el-icon-s-comment">咨询</div>
      <div :class="collectfalg?'btn el-icon-star-on':'btn el-icon-star-off'" @click="setcollect">{{collectfalg?'已收藏':'收藏'}}</div>
      <div class="add" @click="add">加入学习</div>
    </footer>
  </div>
</template>

<script>
import { getClassDetail, collect, iscollect } from "../api/details";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      commodity: {},
      flag: true,
      collectfalg: false,
    };
  },
  mounted() {
    getClassDetail(this.$route.params.id)
      .then((res) => {
        this.commodity = res.data;
      })
      .then(() => {
        iscollect(this.commodity.id, this.$store.state.user.userid).then(
          (res) => {
            if (res.data.length == 0) {
              this.collectfalg = false;
            } else {
              this.collectfalg = true;
            }
          }
        );
      });
  },
  methods: {
    setcollect() {
      collect(this.commodity.id, this.$store.state.user.userid).then((res) => {
        if (Object.keys(res.data).length) {
          this.collectfalg = true;
        } else {
          this.collectfalg = false;
        }
      });
    },
    add() {
      if (this.$store.state.car.carList.length != 0) {
        this.$store.state.car.carList.forEach((ele, i) => {
          if (ele.id == this.commodity.id) {
            this.flag = false;
            Toast.fail("请勿重复添加");
          }
        });
        if (this.flag) {
          this.$store.commit("SET_CARLIST", this.commodity);
          Toast.success("成功加入购物车");
        }
      } else {
        this.$store.commit("SET_CARLIST", this.commodity);
        Toast.success("成功加入购物车");
      }
    },
  },
};
</script>

<style scoped>
.detbox {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
header {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.22rem;
  box-sizing: border-box;
  background-color: #ffffff;
}
.main {
  flex: 1;
  overflow: auto;
}
header i {
  font-size: 0.48rem;
}
header div {
  font-size: 0.32rem;
  font-weight: bold;
}
.img img {
  height: 4.22rem;
  width: 100%;
}
.title {
  padding: 0.3rem;
  background-color: #ffffff;
  margin-top: 0.1rem;
}
h6 {
  line-height: 0.8rem;
  font-size: 0.32rem;
  border-bottom: 1px solid #eceef1;
}
.shoucang {
  line-height: 0.8rem;
}
.price {
  font-size: 0.32rem;
  color: #e0502d;
  margin-top: 0.3rem;
}
.info {
  background-color: #ffffff;
  margin-top: 0.1rem;
  padding: 0.3rem;
}
.info h3 {
  font-size: 0.28rem;
  line-height: 0.54rem;
}
.info p {
  font-size: 0.26rem;
}
footer {
  height: 1.04rem;
  display: flex;
  text-align: center;
  line-height: 1.04rem;
  font-size: 0.28rem;
}
footer .btn {
  flex: 1;
  background-color: #ffffff;
  line-height: 1.04rem;
}
.btn:first-of-type {
  border-right: 1px solid #eceef1;
}
.add {
  flex: 2;
  background-color: #ea5235;
  color: #ffffff;
}
</style>
